<template>
	<div class="memorandum">
		<div class="memorandum-box max_W clear">
			<schedule-calendar :events="dataList" :dateItemRender="itemRender" >
				 </schedule-calendar>
		</div>
		
	</div>
</template>

<script>


	import scheduleCalendar from './scheduleCalendar'
	export default{
		components: {
			scheduleCalendar
		},
		data(){
			return {
				dataList: [],
				 message: 'Hello',
				itemRender(item) {
				    const h = this.$createElement
				    return h('span', 'CustomRender：' + item.text)
				},

			}
		},
		created(){
			// this.scheduleList() 
		},
		mounted() {
		    this.$nextTick(function () {
		       
		     })
		    
		},
		watch: {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.memorandum{
		height: 78vh;
	}

	.memorandum-box{
		height: 95%;
		background: #fff;
	}
	.memorandum-date{
		width: 754/1200*100%;
	}

	.memorandum-msg{
		width: 446/1200*100%;
		height: 100%;
		background: url(../../../../public/images/Group-8.png) no-repeat;
		background-size: 100% 100%;
		>a{
			display: block;
			text-align: right;
			padding: 40/446*100% 30/446*100% 25/446*100% 0;
			>i{
				display: inline-block;
				vertical-align: top;
				width: 96px;
				height: 96px;
				background: url(../../../../public/images/1.png);
			}
			&:hover{
				>i{
					background: url(../../../../public/images/2.png);
				}
			}
		}
		>h3{
			color: #fff;
			font-size: 20px;
			margin-bottom: 25px;
			padding: 0 0 0 60/446*100%;
			line-height: initial;
		}
	}

	.memorandum-schedule{
		height: calc(100% - 210px);
		.el-scrollbar{
			height: 100%;
		}
	}

	.memorandum-list{
		background: #00aeee;
		margin-left: 60/446*100%;
		border-radius: 5px 0 0 5px;
		color: #fff;
		padding: 10px 0 15px 15px;
		font-size: 14px;
		margin-bottom: 20px;
		-moz-transition: all .35s ease-in;
		-webkit-transition: all .35s ease-in;
		-o-transition: all .35s ease-in;
		transition: all .35s ease-in;
		>div{
			line-height: initial;
			&:nth-of-type(1){
				font-weight: bold;
				margin-bottom: 10px;
				>i{
					color: #ffda31;
					margin-left: 20px;
					font-size: 18px;
				}
			}
		}
		.memorandum-txt{
			display: block;
			font-size: 12px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			color: #fff;
			height: 19px;
			line-height: 19px;
			&:hover{
				color: #f2f2f2;
			}
		}
		&:hover{
			box-shadow: 0 6px 7px 0 rgba(0,0,0,0.10);;
			.memorandum-op{
				opacity: 1;
			}
		}
	}
	
	.memorandum-op{
		opacity: 0;
		transition: .3s;
		>i{
			margin-right: 15px;
			cursor: pointer;
			font-size: 14px;
		}
		.el-icon-close{
			&:hover{
				color: red;
			}
		}
		.el-icon-edit{
			&:hover{
				color: #eba300;
			}
		}
	}
	

	.schedule-calendar-counter{
		margin-right: 5px;
	}

</style>